import React from 'react';
import { WeaTools } from 'ecCom';
import { Icon,Tag,Tooltip  } from 'antd';
import './style//viewWeekMonth';

export default class ViewWeekMonth extends React.Component{
  constructor(props){
    super(props)
    this.state={
      selectyear:'',
      monthArray:[1,2,3,4,5,6,7,8,9,10,11,12],
      weekArray:[],
      currentval:'',
      selectval:'',
      _display:"none",
      _clickl:true,
      _clickr:true,
      totalWeek:0,
      currentdates:""//当前选中周的日期
    }
  }
  componentWillMount() {//一些初始化请求
     const {year,isMonth,display,currentValue} = this.props;
     this.init(year,isMonth,display,currentValue);
  }
  init(cyear,isMonth,display,currentValue){
    let now = new Date();
    let nowyear = now.getFullYear() + ""; //当前年
    if(cyear && cyear.length>0){
      nowyear = cyear;
    }
    let _cl = true;
    let _cr = true;
    let _dp = "none";
    if(display && display.length>0){
      _dp = display;
    }
    if(isMonth){ //月
      if(currentValue==12){
        _cr = false;
      }
      if(currentValue==1){
        _cl = false;
      }
      this.setState({currentval:currentValue,selectyear:nowyear,selectval:currentValue,_clickl:_cl,_clickr:_cr,_display:_dp,currentdates:""});
      this.props.changeValue && this.props.changeValue(currentValue)
    }else{//周
      let params = {year:cyear,currentValue:currentValue};
      WeaTools.callApi('/api/workrelate/plan/getweek', 'GET', params).then((data)=>{                
        if(data.status){
          let cweek = data.currentweek;
          if(currentValue && currentValue>0){
            cweek = currentValue;
          }
          if(cweek==1){
            _cl = false;
          }
          if(cweek==data.totalWeek){
            _cr = false;
          }
          this.setState({currentval:data.currentweek,weekArray:data.datas,selectyear:nowyear,
            selectval:cweek,_clickl:_cl,_clickr:_cr,totalWeek:data.totalWeek,_display:_dp,currentdates:data.currentdates});
          this.props.changeValue && this.props.changeValue(cweek)
        }
     });
    }
  }
  componentWillReceiveProps(newProps){
    let {year,isMonth,display,currentValue} = newProps;
    if(newProps.year != this.props.year || newProps.isMonth != this.props.isMonth){
      this.init(year,isMonth,display,currentValue);
    } else {
      this.setState({
        selectval: currentValue
      })
      this.props.changeValue && this.props.changeValue(currentValue)
    }
  }
  //每年周和月的组件
  //className  style   isMonth 是否是月  display隐藏打开框 year年份  doClose回调函数 currentValue当前显示值
  //isshowdate 显示出周的日期
  render(){
    const {className,style,isMonth} = this.props;
    const{monthArray,weekArray,selectval,currentval,selectyear} = this.state;
    return(
       <div className={"wea-workrelate-viewweekmonth "+(className?className:"")} style={style}>
           {isMonth?this.view(monthArray):this.view(weekArray)}
       </div>
    )
  }
  view(alldata){
    const{selectval,currentval,selectyear,_display,_clickl,_clickr,totalWeek,currentdates} = this.state;
    const {isMonth,isshowdate} = this.props;
    let _showval = isMonth?"月":"周";
    return <div className="viewweekmonth-main">
            <div className="viewweekmonth-header">
                <Icon className={_clickl && "c-pointer"} type="left" onClick={(e) => this.switchTime('left',e)} title={"上一"+_showval}/>
                <Tooltip title={selectyear+"年第"+selectval+_showval+(currentdates?" 日期为:"+currentdates:"")}>
                  <span id="planTypeSpan" className="viewweekmonth-header-span" onClick={(e) => this.setDisplay(e)}>{selectval+_showval}</span>
                </Tooltip>
                <Icon className={_clickr && "c-pointer"} onClick={(e) => this.switchTime('right',e)} type="right" title={"下一"+_showval}/>
                {!isMonth && isshowdate && <span className="viewweekmonth-header-datespan">{currentdates}</span>}
            </div>
            <div className="viewweekmonth-list" style={{display:_display}}>
            {alldata && alldata.length>0 && alldata.map((element,idx)=>{
              let _val = element.week?element.week:element;
              return <Tooltip title={selectyear+"年第"+_val+_showval+(element.title?" 日期为:"+element.title:"")}>
                        <Tag className={(_val==selectval?"selectval":"") || (_val==currentval?"currentval":"")} onClick={(e)=>this.changeNum(_val,(element.title?element.title:""),e)}>{_val}</Tag>
                     </Tooltip>
            })}
            </div>
          </div>
  }
  switchTime(type,e){
    const {isMonth} = this.props;
    const{_clickl,_clickr,weekArray} = this.state;
    let {selectval} = this.state;
    selectval = selectval == "" ? 0 : parseInt(selectval);

    let cdates = "";
    if(type=="left" && _clickl){
      if(!isMonth){
        cdates = this.getCurrentDates(selectval-1);
      }
      this.changeNum(selectval-1,cdates,e);
    }else if(type=="right" && _clickr){
      if(!isMonth){
        cdates = this.getCurrentDates(selectval+1);
      }
      this.changeNum(selectval+1,cdates,e);
    }
  }
  getCurrentDates(val){
    const{weekArray} = this.state;
    let cdates = "";
    weekArray && weekArray.length>0 && weekArray.map((element,idx)=>{
     if(val==element.week){
      cdates = element.title;
     }
    });
    return cdates;
  }
  setDisplay(e){
    const{_display} = this.state;
    if(_display=="none"){
      this.setState({_display:"inline-block"});
    }else{
      this.setState({_display:"none"});
    }
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  }
  changeNum(num,dates,e){
    const{isMonth} = this.props;
    let _cl = true;
    let _cr = true;
    if(num==1){
      _cl = false;
    }
    if(isMonth){
      if(num==12){
        _cr = false;
      }
    }else{
      const{totalWeek} = this.state;
      if(num==totalWeek){
        _cr = false;
      }
    }
    this.setState({selectval:num,_display:"none",_clickl:_cl,_clickr:_cr,currentdates:dates});
    this.props.changeValue && this.props.changeValue(num)
    this.doClose(num);
    e.stopPropagation();
    e.nativeEvent.stopImmediatePropagation();
  }
  //回调函数
  doClose(num){
    if(typeof this.props.doClose === "function"){
      this.props.doClose(num);
    }
  }
}